/*
 * @Author: lusx 
 * @Date: 2020-04-30 16:23:08 
 * @Last Modified by: lusx
 * @Last Modified time: 2020-05-21 11:43:14
 */
import React, { useState, useEffect } from 'react';
import { Switch, Route } from 'react-router-dom';
import { inject, observer } from 'mobx-react';
import { List, SegmentedControl, Button, Icon, Badge } from 'weaver-mobile';
import { Form, RouteLayout } from 'weaver-mobile-page';
import MyForm from '../../../governTools/comForm/comForm.js'
import NewTaskList from './newTaskList'
import { toJS } from 'mobx';
const prefixCls = 'g-add'

@inject('addStore')
@observer
export default class Add extends React.Component {
    componentDidMount() {
        // const { location: { state: { categoryid } }, addStore: { init } } = this.props;
        // init({ categoryid });
        const { addStore: { init } } = this.props;
        if(!this.props.history.location.state){
            this.props.history.replace('/pro/duty');
            return ;
        }
        init(this.props.history.location.state);
    }
    render() {
        const { match: { path, params: { quicktype }, url }, addStore: { projectForm, taskForm, currentIndex } } = this.props;
        const { addStore, ...others } = this.props;
        return (
            <div className={prefixCls}>
                <MySegmentedControl {...others} changeHandle={this.changeHandle} />
                <div className={`${prefixCls}-form-wraps`} style={{ height: 'calc(100% - 87px)' }}>
                    <Form >
                        <List>
                            <Switch>
                                <Route path={`${path}/list`}>
                                    <NewTaskList url={url} />
                                </Route>
                                <Route
                                    path={`${path}/task`}
                                    render={() => (
                                        <RouteLayout>
                                            <div
                                                key="wmPoutePageDemo"
                                                className="wm-route-layout"
                                            >
                                                <MyForm comForm={this.props.addStore.taskForm} />
                                                <Btns {...others} />
                                            </div>
                                        </RouteLayout>
                                    )}
                                />
                                <Route
                                    key={`add-task-${currentIndex}`}
                                    path={`${path}/add-task/${currentIndex}`}
                                    render={() => (
                                        <RouteLayout>
                                            <div
                                                key="wmPoutePageDemo"
                                                className="wm-route-layout"
                                            >
                                                <MyForm comForm={this.props.addStore.taskForms[currentIndex]} />
                                                <Btns {...others} />

                                            </div>
                                        </RouteLayout>
                                    )}
                                />
                                <Route path={path}>
                                    <MyForm comForm={projectForm} />
                                </Route>
                            </Switch>
                        </List>
                    </Form>
                </div>
                <Btns {...others} />
            </div>
        )
    }

    changeHandle = (e) => {
        let { match: { url }, history: { push }, location: { pathname }, addStore: { validator } } = this.props;
        const activeIndex = e.nativeEvent.selectedSegmentIndex;
        if(activeIndex === 0){
            pathname = url;
        }
        validator({ pathname }).then((result) => {
            if (result === true) {
                activeIndex === 1 ? push({ pathname: `${url}/list` }) : push({ pathname: url });
            } else {
                push({ pathname: url });
                return false;
            }
        })
    }
}

// 基本信息、子任务列表切换按钮
function MySegmentedControl(props) {
    const [actionIndex, setIndex] = useState(0);
    useEffect(() => {
        const { location: { pathname } } = props;
        if (pathname === '/quickbar/add/list') setIndex(1);
        else setIndex(0);
    });
    return (
        <div >
            <SegmentedControl values={['基本信息', '子任务']} selectedIndex={actionIndex} className={`${prefixCls}-my-segmented`} onChange={props.changeHandle} />
        </div>
    )
}

// 保存、取消按钮
const Btns = inject('addStore')(observer((props) => {
    const { location: { pathname }, history: { push }, addStore: { saveloading, canSubmit }, match: { path } } = props;
    const next = () => {
        const { match: { url }, addStore: { validator, canSubmitFun }, history: { goBack } } = props;
        validator({ pathname }).then((result) => {
            if (result === true) {
                if (pathname.endsWith('add')) {
                    push({ pathname: `${url}/list` });
                }
                if (pathname.endsWith('task')) {
                    canSubmitFun({ canSubmit: true });
                    goBack();
                }
                if (pathname.includes('add-task')) {
                    canSubmitFun({ canSubmit: true });
                    goBack();
                }
            } else {
                return false;
            }
        })
    }
    const cancel = () => {
        const { history: { goBack } } = props;
        // if (pathname.includes('add-task')) {
        //     import('weaver-mobile').then(all => {
        //         const { alert } = all.Modal;
        //         alert('注意', '确定取消该子任务吗', [
        //             { text: '是', onPress: () => { setCount({ type: 'cancel' }); goBack(); } },
        //             { text: '否', onPress: () => { } },
        //         ])
        //     })
        // } else {
        //     goBack();
        // }
        goBack();
    }
    const submit = () => {
        if (pathname.endsWith('task')) {
            import('weaver-mobile').then(all => {
                const { alert } = all.Modal;
                alert('注意', '是否继续添加子任务', [
                    { text: '是', onPress: () => { } },
                    { text: '否', onPress: () => saveFun() },
                ])
            })
        } else {
            saveFun();
        }
    }
    const saveFun = () => {
        const { addStore: { save },location: { pathname } } = props;
        save({pathname}).then((result) => {
            if(result&& result.result === '1'){
                push('/quickbar/new');
            }
        });
    }
    return (
        <div className='g-add-btns-wraps am-flexbox wm-route-layout-buttons am-flexbox-align-center'>
            <div className='am-flexbox-item' style={{ flex: '1 1 0%'}} onClick={cancel}>
                <Button type="primary" style ={{backgroundColor: 'transparent',color: '#55b1f9',border: 'none'}} >取消</Button>
            </div>
            {/* <div className={`${prefixCls}-tianjia-wraps-disable`} /> */}

            <Switch>
                <Route path={`${path}/list`}>
                    <div className='am-flexbox-item' style={{ flex: '1 1 0%' }}>
                        <Button type="primary" disabled={true && !saveloading ? false : true} onClick={submit}>提交</Button>
                    </div>
                </Route>
                <Route path={`${path}/task`}>
                    <div className='am-flexbox-item' style={{ flex: '1 1 0%' }}>
                        <Button type="primary" disabled={pathname.includes('task') && !saveloading ? false : true} onClick={next}>下一步</Button>
                    </div>
                </Route>
                <Route path={`${path}`}>
                    <div className='am-flexbox-item' style={{ flex: '1 1 0%' }}>
                        <Button type="primary" onClick={next}>下一步</Button>
                    </div>
                </Route>
            </Switch>



        </div>
    )
}))

